<template>
  <div class="app-container home">
    <div class="rechargeTable">
      <p style="text-align: center;font-size: 14px">最近充值列表</p>
      <div class="dataShow">
        <el-table
          :data="tableData"
          stripe
        >
          <el-table-column
            prop="name"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="recharge"
            label="充值金额"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="160">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="echartsShow">
      <div class="PieEcharts">
        <v-chart class="Piechart" :option="option"/>
        <v-chart class="Piechart" :option="option"/>
        <v-chart class="Piechart" :option="option"/>
      </div>
      <div class="BarEcharts">
        <v-chart class="Barchart" :option="option1"/>
        <v-chart class="Barchart" :option="option2"/>
      </div>
    </div>
    <div class="recentBusiness">
      <p style="text-align: center;font-size: 14px">最近项目</p>
      <div class="dataShow">
        <el-table
          :data="tableData2"
          stripe
        >
          <el-table-column
            prop="projectName"
            label="项目名称"
            width="80">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="金额"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="patientName"
            label="患者姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="doctorName"
            label="医生姓名"
            width="80">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {BarChart, LineChart, PieChart} from "echarts/charts";
import {LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent} from "echarts/components";
import VChart, {THEME_KEY} from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  LegendComponent
]);
const colors = ['#5470C6', '#EE6666'];

export default {
  name: "Index",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "lodon"
  },
  data() {
    return {
      // 版本号
      version: "3.7.0",
      tableData: [{
        name: '张三',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }, {
        name: '李四',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }, {
        name: '王五',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }, {
        name: '赵六',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }, {
        name: '陈七',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }, {
        name: '刘十一',
        recharge: 1000,
        date: '2021-11-07 12:00:00'
      }
      ],
      tableData2: [
        {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }, {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }, {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }, {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }, {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }, {
          projectName: '针灸',
          amount: 1000,
          patientName: '张三',
          doctorName: '李四'
        }
      ],
      option: {
        title: {
          text: "项目的比例",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: [
        //     "Direct",
        //     "Email",
        //     "Ad Networks",
        //     "Video Ads",
        //     "Search Engines"
        //   ]
        // },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "52%",
            center: ["50%", "50%"],
            data: [
              {value: 335, name: "艾灸"},
              {value: 310, name: "按摩"},
              {value: 234, name: "针刺"},
              {value: 135, name: "龙骨灸"},
              {value: 135, name: "督脉灸"},
              {value: 135, name: "针按"},
              {value: 135, name: "灸按"},
              {value: 154, name: "针灸"}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      option1: {
        title: {
          text: "项目的比例",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        /*  legend: {
            orient: "vertical",
            left: "left",
            data: [
              "Direct",
              "Email",
              "Ad Networks",
              "Video Ads",
              "Search Engines"
            ]
          },*/
        xAxis:
          {
            type: 'category',
            data: ['艾灸',
              '按摩',
              '针刺',
              '龙骨',
              '督脉',
              '针按',
              '灸按',
              '针灸'],

            axisPointer: {
              show: true,
              type: 'line',
              snap: true,
            }
          },
        yAxis: {
          type: 'value',
          axisPointer:
            {
              show: true,
              type: 'line',
              snap: true,
            }
        },
        toolbox:
          {
            show: true,
            orient: 'horizontal',
            feature: {
              dataZoom: {
                yAxisIndex: "none"
              },
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
            },
          },
        series:
          [
            {
              name: "项目的比例",
              type: "bar",
              radius: "52%",
              center: ["50%", "50%"],
              data: [
                {value: 335, name: "艾灸"},
                {value: 310, name: "按摩"},
                {value: 234, name: "针刺"},
                {value: 135, name: "龙骨灸"},
                {value: 235, name: "茶灸"},
                {value: 135, name: "督脉灸"},
                {value: 135, name: "针按"},
                {value: 135, name: "灸按"},
                {value: 154, name: "针灸"}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
      },
      option2: {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Precipitation  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Precipitation  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Precipitation(2015)',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Precipitation(2016)',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
            ]
          }
        ]
      },
    }
  }
  ,
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
    ,
  }
  ,
}
;
</script>

<style scoped lang="scss">


.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

div {
  display: block;
}

/*:last-child 制定父元素最后一个子元素的样式*/
.el-row :last-child {
  margin-bottom: 0;
}


.el-row:after, .el-row:before {
  display: table;
  content: "";
}

*, :after, :before {
  /**-webkit-box-sizing: inherit;*/
  box-sizing: inherit;
}

/**CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

实例*/
.el-col {
  background-color: #ffffff !important;
  border-radius: 4px;
}

.el-col-4 {
  width: fit-content;
}


.rechargeTable {
  width: fit-content;
  height: 400px;
  margin: 0;
  float: left;
  background-color: #ff9164;

}

.Piechart {
  height: 250px;
  width: 270px;
  float: left;
  margin: 10px;
  border: 1px solid #39b239;

}

.Barchart {
  float: left;
  height: 250px;
  width: 800px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid #39b239;
}

.dataShow {
  border: 1px solid #332c2c;
}
.recentBusiness
{
  float: right;
  border: 1px solid blue;


}


.echartsShow {
  float: left;
  width: 55%;
  border: 1px solid red;
  margin-left: 5px;
}

</style>

